<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<u-transition v-if="currentBar == 0" :show="currentBar == 0" mode="fade-right" duration="150"><home-vue class="content"></home-vue></u-transition>
		<u-transition v-if="currentBar == 1" :show="currentBar == 1" mode="fade-right" duration="150"><manage-vue class="content"></manage-vue></u-transition>
		<u-transition v-if="currentBar == 2" :show="currentBar == 2" mode="fade-right" duration="150"><mine-vue class="content" :userInfo="userInfo"></mine-vue></u-transition>
		<view :class="currentBar == 0 ? 'home-tabbar' : 'other-tabbar'">
			<u-tabbar :value="currentBar" @change="onChangeBar" activeColor="#649e23" :fixed="false" :safeAreaInsetBottom="false" style="padding-bottom: 16px;">
				<u-tabbar-item text="首页">
					<i slot="inactive-icon" class="iconfont icon-home u-page__item__slot-icon" ></i>
					<i slot="active-icon" class="iconfont icon-home-active u-page__item__slot-icon" ></i>
				</u-tabbar-item>
				<u-tabbar-item text="管理">
					<i slot="inactive-icon" class="iconfont icon-type u-page__item__slot-icon" ></i>
					<i slot="active-icon" class="iconfont icon-type-active u-page__item__slot-icon" ></i>
				</u-tabbar-item>
				<u-tabbar-item text="我的">
					<i slot="inactive-icon" class="iconfont icon-mine u-page__item__slot-icon" ></i>
					<i slot="active-icon" class="iconfont icon-mine-active u-page__item__slot-icon" ></i>
				</u-tabbar-item>
			</u-tabbar>
		</view>
		<u-modal :show="isShow" showCancelButton @cancel="onCancel" @confirm="onConfirm" ref="uModal" :asyncClose="true">
			<u--form>
				<u-form-item label="管理秘钥" labelWidth="80">
					<u--input placeholder="请输入管理秘钥" border="bottom" v-model="secretKey" clearable></u--input>
				</u-form-item>
			</u--form>
		</u-modal>
	</view>
</template>

<script>
	import homeVue from './home/index.vue';
	import manageVue from './manage/index.vue';
	import mineVue from './mine/index.vue';
	export default {
		components: { homeVue, manageVue, mineVue },
		onShow() {
			this.userInfo = this.$cache.GET_USERINFO();
		},
		data() {
			return {
				userInfo: {},
				secretKey: '',
				isShow: false,
				currentBar: 0
			}
		},
		methods: {
			async onChangeBar(index) {
				// console.log(this.userInfo)
				if(index == 1 && this.userInfo.isAdmin == 0) this.isShow = true;
				this.currentBar = index;
			},
			async onConfirm() {
				const res = await this.$api.adminKey.check(this.secretKey, this.userInfo.id);
				if(res.code == 200 && res.data) {
					const userInfoRes = await this.$api.user.findOne(this.userInfo.id);
					if(userInfoRes.code == 200) {
						this.$cache.SET_USERINFO(userInfoRes.data);
						this.userInfo = userInfoRes.data;
						this.$toast.success(this,'验证成功');
						this.isShow = false;
						this.secretKey = '';
					}
				}else {
					this.isShow = false;
					this.secretKey = '';
					this.$toast.error(this,'验证错误',1500,() => {
						this.currentBar = 0;
					});
				}
			},
			onCancel() {
				this.currentBar = 0;
				this.isShow = false;
				this.secretKey = '';
			}
		}
	}
</script>

<style lang="scss">
	.content {
		height: calc(100vh - 61px);
	}
	.home-tabbar {
		.u-tabbar__content__item-wrapper {
			padding-bottom: 10px;
			background-color: #cde0b7;
			border-top: 1px solid white;
		}
	}
	.other-tabbar {
		.u-tabbar__content__item-wrapper {
			padding-bottom: 10px;
		}
	}
	
	.u-page__item__slot-icon {
		font-size: 46rpx;
	}

</style>
